<template>
	<div class="body">
	<div class="head_div">
	</div>
	<div class="top_div">
	<div class="icon_div">
		<img src="../assets/tt.jpeg">
		<h3>若寒</h3>
		<p>ID:1069643013</p>	
	</div>
	<div class="hongbao_div">
		<div class="item">
			<p>红包</p>
		    <p>88</p>
		</div>
		<div class="item">
			 <p>优惠卷</p>
		    <p>12张</p>
		</div>
		<div class="item">
			<p>鲜豆</p>
		    <p>218</p>
		</div>
		<div class="item">
			 <p>白条</p>
		    <p>1000</p>
		</div>
	</div>
	</div>
	<div class="mine_list">
		<div class="mine_div">
			<img class="img1" src="../assets/home/tab_mine_active.png">
			<span class="span_item">我的钱包</span>
		</div>
		
		<div class="mine_div" @click="tiao()">
			<img  class="img1" src="../assets/home/tab_mine_active.png">
			<span class="span_item">我的地址</span>
		</div>
		
		<div class="mine_div">
			<img class="img1" src="../assets/home/tab_mine_active.png">
			<span class="span_item">客服与帮助</span>
		</div>
	</div>

</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			tiao(){
				this.$router.push('/address')
			}
		}
	}
</script>

<style Lang="less" scoped>
	.item{
		align-items: center;
		text-align: center;
	}
	.item :nth-child(1){
		font-size: 12px;
		color: #C1C0C9;
	}
	.item :nth-child(2){
		font-size: 20px;
		color: #262628;
	}
	.top_div{
		height: 190px;
		 margin-top: -20%;
		 margin-bottom: 5%;
		 margin-left: 5%;
		 margin-right: 5%;
		background-color: #FFFFFF;
		border-radius: 8px;
	}
	 .hongbao_div span{
		margin-top: -50px;
		border-top: 1px solid #F1F1F1;
	
	}
	.body{
		background-color: #F8F8F8;
		width: 100%;
		
	}
	.head_div{
		background-color: #3A6FF3 ;
		width: 100%;
		height: 170px;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}
	.head_div img{
		width: 100%;
		
	}
	.icon_div{
		
		height: 120px; 
		 margin-top: -1%;
		 margin-bottom: 10%;
		background-color: #55ffff;
	text-align: center;
	border-bottom: 1px solid #F1F1F1;
		
}
.icon_div img{
	height: 74px;
	width: 74px;
	border: 1px solid #eee;
	border-radius: 50%;
	padding: 10px;
	box-shadow: 0 0 10px #ddd;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
}
h3{
	font-size: 24px;
	color: #262628 ;
	padding-top: 15%;
	
}
p{
	padding-top: 5px;
}
.hongbao_div{
	display: flex;
	justify-content: space-between;
	background: #FFFFFF;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: -10%;
	padding-top: 10px;
}

.mine_list{
	height: 146px;
	margin-left: 18px;
	margin-top: 16px;
	margin-right: 18px;
	background-color: #ffffff;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.o8);
}
.mine_div{
	display: flex;
	height: 48px;
	line-height: 48px;
	text-align: left;
	padding-left: 16px;
	justify-content: start;
	align-items: center;
	color: #262626;
}
.mine_div .img1{
	height: 22px;
	width: 22px;
	background-color: #32c5ff;
	border-radius: 8px;
	margin-right: 12px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

